<template>
  <el-dialog v-model="dialog.visible" :title="title" width="500" @close="handleCloseDialog">
    <div class="form-container">
      <el-form ref="formRef" :model="formData" :rules="formRules" label-width="100" class="form mb-0">
        <el-form-item label="合伙人名称" prop="mallName">
          <el-input v-model.trim="formData.mallName" placeholder="请输入合伙人名称" />
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input v-model.trim="formData.address" placeholder="请输入地址" />
        </el-form-item>
        <el-form-item label="电话" prop="phonenumber">
          <el-input v-model.trim="formData.phonenumber" placeholder="请输入电话" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model.trim="formData.remark" placeholder="请输入备注" />
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
        <el-button @click="handleCloseDialog">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { ElMessage } from "element-plus";
import MultiImageUpload from "@/components/Upload/MultiImageUpload.vue";
import coinsAPI, { CoinsRechargeRecodeForm } from "@/api/coins/coins-api";
import { TRANSACTION_TYPE_ENUM } from "@/enums/conins/ConinsEnum";
import mallApi, { SysShoppingMallForm } from "@/api/mall/mall-api";
// 定义 emit，用于通知外部关闭事件
const emit = defineEmits(["update:modelValue", "loadData"]);
const dialog = reactive({
  title: "",
  visible: false,
});
/*基础信息*/
const formRef = ref();
const title = computed(() => (formData.value.id ? "编辑" : "新增"));
const defaultFormData: SysShoppingMallForm = {
  address: "",
  id: undefined,
  mallName: "",
  phonenumber: "",
  remark: "",
};
const formData = ref({
  ...defaultFormData,
});
const formRules = reactive({
  address: [{ required: true, message: "请输入地址", trigger: "blur" }],
  mallName: [{ required: true, message: "请输入名称", trigger: "blur" }],
  phonenumber: [
    { required: true, message: "请输入电话", trigger: "blur" },
    {
      validator: (rule: any, value: string, callback: Function) => {
        const phoneRegex = /^1[3-9]\d{9}$/; // 手机号正则
        const landlineRegex = /^0\d{2,3}-\d{7,8}$/; // 座机号正则
        if (!value) {
          callback(new Error("请输入手机号或座机号"));
        } else if (!phoneRegex.test(value) && !landlineRegex.test(value)) {
          callback(new Error("请输入正确的手机号或座机号格式"));
        } else {
          callback();
        }
      },
      trigger: "blur",
    },
  ],
});

async function handleSubmit() {
  const validate = await formRef.value.validate();
  if (!validate) return;
  try {
    if (formData.value.id) {
      await mallApi.update(formData.value);
    } else {
      await mallApi.add(formData.value);
    }
    ElMessage.success("成功");
    emit("loadData");
    handleCloseDialog();
  } catch (error) {
    console.log("error", error);
  }
}

// 关闭弹窗
function handleCloseDialog() {
  formData.value = {};
  Object.assign(formData.value, defaultFormData);
  dialog.visible = false;
  emit("update:modelValue", false); // 关闭弹窗
}

function showModal(val) {
  dialog.visible = true;
  Object.assign(formData.value, defaultFormData, val);
}

defineExpose({
  showModal,
});
</script>
<style style="scss" scoped>
.form-container {
  height: 500px;
  overflow: auto;
}

.form {
  ::v-deep(.el-form-item) {
    margin-bottom: 0;
  }
}
</style>
